<script lang="ts" setup>
import userService from '@/api/userService'
import appStore from '@/store'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'

const userId = localStorage.getItem('userId')
const router = useRouter()
let userProfile = reactive({
  data: {
    userName: '',
    authenticated: '',
    createdTime: '',
    profilePhotoUrl: ''
  }
})
userService.profile({ userId }).then((res) => {
  userProfile.data = res.data.data
})
let profilePhoto = reactive({
  data: {
    FileUrl: ''
  }
})
userService.getProfilePhoto({ userId }).then((res) => {
  profilePhoto.data = res.data.data
})
const handleChange = () => {
  router.push({ name: 'ChangePassword' })
}
</script>

<template>
  <div class="content-box">
    <div class="info-box">
      <el-row>
        <el-col :span="2">
          <div class="photo-box">
            <img class="round_photo" lazy v-if="Object.keys(profilePhoto.data ?? {}).length > 0"
              :src="profilePhoto.data.FileUrl" :preview-src-list="[profilePhoto.data.FileUrl]" />
            <img v-else src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" class="round_photo" />
          </div>
        </el-col>
        <el-col :span="16">
          <div class="userInfo">
            <div>
              <span class="userName">{{ appStore.userStore.name }}</span>
              <span class="label"> ID: {{ userId }}</span>
            </div>
            <div v-if="!userProfile.data.authenticated">
              <span class="info">未进行资料认证，为避免影响您的使用体验请尽快</span>
              <router-link :to="{ name: 'PertificationInformation' }" class="action"> &nbsp 前往认证</router-link>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <span class="registedTime">注册日期： {{ dayjs(userProfile.data.createdTime).format('YYYY-MM-DD hh:mm:ss') }}</span>
        </el-col>
      </el-row>
    </div>
    <div class="settingBox">
      <div class="changePwd-box">
        <el-row>
          <el-col :span="2">
            <p class="label">登录密码：</p>
          </el-col>
          <el-col :span="16">
            <p class="info">安全性高的密码可以使账号更安全。建议您定期更换密码，设置密码必须由8-30位的数字、字母或特殊符号组成。</p>
          </el-col>
          <el-col :span="3">
            <div class="status-icon-background">
              <svg-icon icon="chech" class="status-icon"></svg-icon>
              <span class="settingStatus">&nbsp 已设置 </span>
            </div>
          </el-col>
          <el-col :span="2">
            <span class="action" @click="handleChange">修改密码</span>
            <!-- <router-link :to="{ name: 'ChangePassword' }" class="action"> 修改密码</router-link> -->
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content-box {
  .info-box {
    background-color: #fff;
    padding: 22px 0;
    padding-left: 30px;
    margin-top: 30px;

    .userInfo {
      margin-top: 10px;
    }
  }

  .settingBox {
    height: calc(61vh);
    background: #fff;
    margin-top: 30px;
  }

  .changePwd-box {
    background: #fff;
    padding: 20px 30px;
    border-bottom: 1px solid $border-color;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
  }
}

.photo-box {
  display: flex;
  align-content: center;
  justify-content: center;
}

.round_photo {
  width: 80px;
  height: 80px;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.userName {
  font-weight: bolder;
  font-size: x-large;
  padding-right: 30px;
}

.info {
  color: #9198a4;
  font-size: small;
}

.action {
  color: #0247ea;
  text-decoration: none;
  font-size: small;
  cursor: pointer;
}

.registedTime {
  color: #9198a4;
  text-align: right;
  font-size: small;
  right: 30px;
  bottom: 0px;
  position: absolute;
}

.label {
  font-size: small;
  text-align: center;
}

.settingStatus {
  font-size: small;
  color: darkturquoise;
}

.status-icon-background {
  overflow: hidden;
  background: white;
}

.status-icon {
  filter: drop-shadow(20px 0px 0px darkturquoise);
  border-right: 20px solid transparent;
  margin-left: -20px;
  margin-bottom: -4px;
}
</style>
